import { Button, Divider, ListItem } from "@arco-design/web-vue";
import { IconAt } from "@arco-design/web-vue/es/icon";
import { computed, defineComponent, PropType } from "vue";
import './entityPop.css'

export default defineComponent({
  name: 'EntityPopover',
  props: {
    data: {
      type: Object as PropType<any>,
      default: () => {}
    }
  },
  setup: (props, {}) => {
    const isReal = computed(() => {
      return props.data.isRealTable;
    })
    const list = computed(() => {

      if(isReal.value){
        if(props.data.children){
          return props.data.children.map((d: any) => {
            return {
              table: d.joinTableName,
              column: d.joinTableField
            }
          })
        }
        return []
      }else {
        return [
          {
            table: props.data.joinTableName,
            column: props.data.joinTableField
          }
        ]
      }
    })
    const tableData = computed(() => {
      if(isReal.value){
        return {
          table: props.data.children[0].tableName,
          column: props.data.children[0].tableField
        }
      }else {
        return {
          table: props.data.tableName,
          column: props.data.tableField
        }
      }
    })
    return () => {

      return (
        <div class="entityPop">
          <div class="flex-center entityPop-label">
            <div class="flex flex-2">table:</div>
            <div class="flex flex-1">column:</div>
          </div>
          <div class="flex-center">
            <div class="flex flex-2">{tableData.value.table}</div>
            <div class="flex flex-1">{tableData.value.column}</div>
          </div>
          <Divider orientation="center">
            <div class="entityPop-divider-center">
              <IconAt></IconAt>
              关联
            </div>
          </Divider>
          <div class="flex-center entityPop-label">
            <div class="flex flex-2">table:</div>
            <div class="flex flex-1">column:</div>
          </div>
          {
            list.value.map((item: any, index: number) => {
              return (
                <div class="flex-center" key={index}>
                  <div class="flex flex-2">{item.table}</div>
                  <div class="flex flex-1">{item.column}</div>
                </div>
              )
            })
          }

        </div>
      )
    }
  }
})
